<template>
  <div>
    <!-- 搜索 -->
    <el-row style="margin-bottom: 10px" gutter="10">
      <el-col :span="6">
        <el-input placeholder="商品名" size="mini" v-model="search.name"></el-input>
      </el-col>
      <el-col :span="6">
        <el-select v-model="search.cid" placeholder="请选择" size="mini" style="width: 100%">
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" size="mini" @click="searchData()">搜索</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-table
        ref="multipleTable"
        :data="goodsList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="40">
        </el-table-column>
        <el-table-column
          label="图片"
          width="120">
          <template slot-scope="scope">
            <img :src="$imgPrefix + scope.row.image" width="50px" height="50px"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名字"
          width="500">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格">
        </el-table-column>
        <el-table-column
          prop="salesnum"
          label="销量">
        </el-table-column>
        <el-table-column
          prop="stock"
          label="库存">
        </el-table-column>
        <el-table-column
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="warning" icon="el-icon-edit" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-row>
    <!-- 分页 -->
    <el-row>
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange">
      </el-pagination>
    </el-row>
  </div>
</template>
<script>
export default{
  data(){
    return{
      goodsList:[],
      total: 0,
      multipleSelection: [],
      categoryList:[],
      search:{
        name:"",
        cid: null,
        page: 1,
        size: 10
      }
    }
  },
  mounted(){
    this.searchData()
    // 查询当前卖家所有商品的分类
    this.$axios.get("/category/findByMid").then(res => {
      this.categoryList = res.data.data
    })
  },
  methods:{
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      this.search.page = val
      //
      this.searchData()
    },
    searchData(){
      this.$axios.post("/goods/search",this.search).then(res => {
        this.goodsList = res.data.data.data
        this.search.page = res.data.data.curPage
        this.total = res.data.data.total
      })  
    }
  }
}
</script>
<style scoped>
  
</style>